<template>
  <!-- 编辑窗口 -->
  <el-dialog
    class="my-dialog"
    v-model="dialogVisible"
    width="1000px"
    top="230px"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <template #header="{ titleId }">
      <div class="my-header">
        <h4 :id="titleId" class="-mt-2 text-xl text-left text-black login-title">详情</h4>
        <el-icon class="my-close-btn" @click="() => (dialogVisible = false)">
          <Close />
        </el-icon>
      </div>
    </template>
    <div class="form-box">
      <el-form :inline="true" :model="form" label-width="180px" class="demo-form-inline">
        <template v-for="(item, index) in form.items" :key="index">
          <el-form-item
            v-if="item.Show == 'true' && item.Type == 'text'"
            :label="item.Name"
            :prop="item.Value"
          >
            <el-input
              v-model="item.Value"
              placeholder=""
              clearable
              style="width: 230px"
              :disabled="item.Edit !== 'true'"
            />
          </el-form-item>
          <el-form-item
            v-if="item.Show == 'true' && item.Type == 'select'"
            :label="item.Name"
            :prop="item.Value"
          >
            <el-select
              v-model="item.Value"
              placeholder=""
              clearable
              style="width: 230px"
              :disabled="item.Edit !== 'true'"
            >
              <el-option
                v-for="(val, subIndex) in item.List"
                :key="subIndex"
                :label="val.Label"
                :value="val.Value"
              />
            </el-select>
          </el-form-item>
        </template>
      </el-form>
    </div>
    <p class="mt-10 text-right">
      <el-button @click="dialogVisible = false"> 取 消 </el-button>
      <el-button type="primary" @click="onSave"> 保 存 </el-button>
    </p>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { SaveInfo } from '@/api'
import { ElMessage } from 'element-plus'
const props = defineProps(['type'])

const dialogVisible = ref(false)
const form = ref({
  items: []
})
const open = (row: any) => {
  form.value.items = row
  dialogVisible.value = true
}
defineExpose({ open })
const emit = defineEmits(['refresh'])
const submitData = reactive<any>({})
const onSave = () => {
  //格式化数据
  form.value.items.map((item: any) => {
    submitData[item.Key] = item.Value
  })
  const post = {
    InputStr: `OperType=SaveDetailInfo;$;Type=${props.type}`,
    JsonStr: [submitData]
  }
  SaveInfo(post).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    dialogVisible.value = false
    emit('refresh')
  })
}
</script>
<style scoped lang="less">
.my-close-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  color: #666;
}
</style>
